import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:yt_devops/pages/site/site_device_manager/site_device_manager_controller.dart';
import 'package:yt_devops/styles/styles.dart';

class SiteTitleTabView extends StatelessWidget {
  final List<String> tabs;
  final Function(int) onTabSelected;
  SiteTitleTabView({super.key, required this.tabs, required this.onTabSelected});
  final controller = Get.put(SiteDeviceManagerController());

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 48.h, // 设置选项卡高度
      child: GetBuilder<SiteDeviceManagerController>(
        builder: (controller) {
          return ListView.builder(
            scrollDirection: Axis.horizontal,
            itemCount: tabs.length,
            itemBuilder: (BuildContext context, int index) {
              return GestureDetector(
                onTap: () {
                  onTabSelected(index); // 回调给父组件处理
                },
                child:Container(
                  height: 48.h,
                  color: Colors.white,
                  padding: EdgeInsets.symmetric(horizontal: 12.w),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: [
                      SizedBox(height: 10.h,),
                      SizedBox(
                        height: 22.h,
                        child: Text(
                          tabs[index],
                          style: TextStyles.styleWith(
                            16.sp,
                            color: controller.selectedTitleIndex == index ? const Color(0xFF0F6EFF) : Colour.mainTextColor,
                          ).mediumStyle,
                        ),
                      ),
                      SizedBox(height: 12.h,),
                      Container(
                        height: 3.h,
                        width: 24.w, // 设置下划线宽度
                        color: controller.selectedTitleIndex == index ? Colors.blue : Colors.transparent,
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}


